<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>前端</li>
        <li>Java</li>
        <li>Python</li>
        <li>UI</li>
    </ul>
    <script>
        var list = document.querySelectorAll('li')

        // 1、自定义属性
        // for (var i = 0; i < list.length; i++) {
        //     list[i].index = i
        //     list[i].onclick = function () {
        //         alert(this.index)
        //     }
        // }

        // 2、let
        // for (let i = 0; i < list.length; i++) {
        //     list[i].onclick = function () {
        //         alert(i)
        //     }
        // }

        // 3、forEach
        // Array.from(list).forEach(function (li, i) {
        //     li.onclick = function () {
        //         alert(i)
        //     }
        // })

        // 4、closure
        for (var i = 0; i < list.length; i++) {
            // 每循环一次都会构成一个闭包，每个闭包里都有自己的index，所以就可以点击弹出下标了
            // 外层立即执行函数，i作为实参传进去被index形参所接收
            // 函数立即执行以后把内层函数return到了等号的右边
            // 内层函数才是事件处理函数
            list[i].onclick = (function (index) {
                return function () {
                    alert(index)
                }
            })(i)
        }

    </script>
</body>
</html>